<template>
	<div class="datap ignore-botom-dataP">
		<div class="left_row">
			<div class="global-visualization-box-head">{{ lf_title }}
				<div class="footer-pan"></div>
			</div>
			<div class="lf_chart">
				<div class="lf_col1">
					<div class="lf_row1">常规建筑</div>
					<div class="lf_row2">
						<div class="lf_unit">{{ lf_base1 }}</div>
						<div class="lf_unit">kWh</div>
					</div>
					<div class="lf_row3" style="opacity: 0;">
						能耗{{ lf_subVal1 < 0 ? '降低' : '增加' }} {{ Math.abs(lf_subVal1 || 0.0).toFixed(0) }} kWh
						<img v-if="lf_subVal1 > 0" :src="comstatic+'/images/Group115.png'" />
						<img v-else :src="comstatic+'/images/Group116.png'" />
					</div>
					<div class="lf_echart">
						<uni-echarts ref="echarts10" :option="optionLAValue" canvasId="echarts10"></uni-echarts>
					</div>
				</div>
				<div class="lf_col2">
					<div class="lf_row1">近零能耗建筑</div>
					<div class="lf_row2">
						<div class="lf_unit">{{ lf_base2 }}</div>
						<div class="lf_unit">kWh</div>
					</div>
					<div class="lf_row3">
						能耗降低{{ lf_base3}} kWh
						<img :src="comstatic+'/images/Group116.png'" />
					</div>
					<div class="lf_echart">
						<uni-echarts ref="echarts11" :option="optionLBValue" canvasId="echarts11"></uni-echarts>
					</div>
				</div>
			</div>
		</div>
		<div class="center_row">
			<div class="global-visualization-box-head">
				{{ cen_title }}
				<div class="footer-pan"></div>
			</div>
			<div class="cen_zl">
				<div class="shuiqiuchart">
					<div id="econtainer" class="liquidfill-container"></div>
				</div>
				<div class="cen_right">
					<div class="cen_jian">
						<div class="cen_layout">
							<img :src="comstatic+'/reddImg/jianliang.png'" alt="" />
							<div class="cen_content">
								<span class="cen_text">减碳量</span>
								<span class="cen_unit">(kg)</span>
							</div>
						</div>
						<div class="cen_num">{{ subCarbon }}</div>
					</div>
					<div class="cen_xian">
						<div class="cen_circle"></div>
						<div class="cen_circle"></div>
					</div>
					<div class="cen_zong">
						<div class="cen_layout">
							<img :src="comstatic+'/reddImg/zongliang.png'" alt="" />
							<div class="cen_content">
								<span class="cen_text">碳排放总量</span>
								<span class="cen_unit">(kg)</span>
							</div>
						</div>
						<div class="cen_num">{{ totalCarbon }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_row">
			<div class="global-visualization-box-head">{{ rg_title }}
				<div class="footer-pan"></div>
			</div>
			<div class="rt_echart">
				<uni-echarts ref="echarts3" :option="optionRValue" canvasId="echarts3"></uni-echarts>
			</div>
		</div>
	</div>
</template>
<script>
	import 'echarts-liquidfill'
	import * as echarts from 'echarts';
	import store from '@/store/index.js';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionBottomLeftAValue,
		optionBottomLeftBValue,
		optionBottomCenterValue,
		optionBottomRightValue
	} from "@/common/echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				lf_title: '能耗对比',
				cen_title: '碳排放对比',
				rg_title: '当天各分项能耗数据',
				lf_base1: 285336,
				lf_base2: 25680,
				lf_base3: 0,
				lf_subVal1: 0,
				subCarbon: 32374,
				totalCarbon: 5633,
				optionLAValue: {},
				optionLBValue: {},
				optionCenterValue: {},
				optionRValue: {},
				screenFont: 12,
				echartInstance: {},
				comstatic: $config.comstatic
			}
		},
		mounted() {
			let that = this;
			this.lf_base3 = this.lf_base1 - this.lf_base2;
			this.optionLAValue = optionBottomLeftAValue;
			this.optionLBValue = optionBottomLeftBValue;
			this.optionRValue = optionBottomRightValue;
			this.screenFont = store.state.screenWidth / 1920 * 16;
			console.log('==screenFont>>', this.screenFont);
			this.optionRValue.legend.itemHeight = this.screenFont;
			this.optionRValue.legend.textStyle.rich.name.fontSize = this.screenFont;
			this.optionRValue.legend.textStyle.rich.value.fontSize = this.screenFont;
			this.optionRValue.legend.textStyle.rich.unit.fontSize = this.screenFont;
			// console.log('==optionRValue>>', JSON.stringify(this.optionRValue));
			// #ifdef H5
			this.$nextTick(() => {
				let chartDom = document.getElementById('econtainer');
				that.echartInstance = echarts.init(chartDom);
				that.optionCenterValue = optionBottomCenterValue;
				that.echartInstance.setOption(that.optionCenterValue);
			});
			// #endif
			setTimeout(() => {
				if (store.state.hasLogin) {
					that.loadCarbonData();
				}
			}, 1200);

			uni.$on('setCircleOption', (res) => {
				that.initCircleOption();
			});
			
			//无效动画
			setInterval(function() {
				// if (that.currentState) {
				// 	that.$nextTick(() => {
				// 		that.echartInstance.dispatchAction({
				// 			type: 'downplay',
				// 			seriesName: 'AccessFrom',
				// 			dataIndex: that.currentIndex,
				// 		});
				// 		console.log('==echartInstance>>', that.echartInstance);
				// 	});
				// 	if (that.currentIndex < 5) {
				// 		that.currentIndex++
				// 	} else {
				// 		that.currentIndex = 0
				// 	}
				// } else {
				// 	that.$nextTick(() => {
				// 		that.echartInstance.dispatchAction({
				// 			type: 'highlight',
				// 			seriesName: 'AccessFrom',
				// 			dataIndex: that.currentIndex,
				// 		});
				// 		console.log('==echartInstance>>', that.echartInstance);
				// 	});
				// }
				// that.currentState = !that.currentState;
				// console.log('==currentState>>', that.currentState);
			}, 2000);
		},
		methods: {
			initCircleOption() {
				if (store.state.fanMapArray) {
					let fanMapArray = store.state.fanMapArray
					// console.log('fanMapArray===>>>>', fanMapArray);
					this.optionRValue = {
						...this.optionRValue,
						legend: {
							...this.optionRValue.legend,
							formatter: (name) => {
								for (let index = 0; index < fanMapArray.length; index++) {
									if (fanMapArray[index].name === name) {
										return `{name|${name.replaceAll('用电', '')}}{value|${fanMapArray[index].value}}{unit|%}`;
									}
								}
							},
							data: fanMapArray
						},
						series: {
							...this.optionRValue.series,
							data: fanMapArray
						}
					}
				}
			},
			loadCarbonData() {
				let that = this;
				request.get('/jeecgboot/statistic/carbon/data?projectId=' + $config.pcode).then(resData => {
					// console.log('resData==>>', resData);
					if (resData.code == 200) {
						that.lf_base1 = resData.result.nomarl.toFixed(0)
						that.lf_base2 = resData.result.nearZero.toFixed(0)
						that.lf_base3 = (that.lf_base1 - that.lf_base2).toFixed(0)

						that.subCarbon = resData.result.subCarbon.toFixed(0)
						that.totalCarbon = resData.result.totalCarbon.toFixed(0)

						let ratioValue = resData.result.ratio.toFixed(2)
						that.optionCenterValue.series[0].data = [ratioValue, ratioValue, ratioValue]
						that.echartInstance.setOption(that.optionCenterValue);

						that.optionLAValue.series[0].data = [that.lf_base1]
						that.optionLAValue.series[1].data = [that.lf_base1]
						that.optionLAValue.series[2].data = [that.lf_base1 * 0.9]

						that.optionLBValue.series[0].data = [that.lf_base1]
						that.optionLBValue.series[1].data = [that.lf_base2 * 1.2]
						that.optionLBValue.series[2].data = [that.lf_base2]

						console.log("optionLAValue==>>", that.optionLAValue.series)

					}
				}).catch(errData => {
					console.log('errData176==>>', errData)
				});
			},
		},
	}
</script>
<style>
	@import 'index.css';
</style>
